/* fade-in-linear */
.fade-in-linear-enter,
.fade-in-linear-appear {
  opacity: 0;
}
.fade-in-linear-enter-active,
.fade-in-linear-appear-done {
  opacity: 1;
  transition: opacity 0.3s linear;
}
.fade-in-linear-exit {
  opacity: 1;
}
.fade-in-linear-exit-active {
  opacity: 0;
  transition: opacity 0.3s linear;
}

/* fade-in */
.fade-in-enter,
.fade-in-appear {
  opacity: 0;
}
.fade-in-enter-active,
.fade-in-appear-done {
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.fade-in-exit {
  opacity: 1;
}
.fade-in-exit-active {
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* fade-in-left */
.fade-in-left-enter,
.fade-in-left-appear {
  opacity: 0;
  transform: translate(-30px, 0);
}
.fade-in-left-enter-active,
.fade-in-left-appear-done {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.fade-in-left-exit {
  opacity: 1;
  transform: translate(0, 0);
}
.fade-in-left-exit-active {
  opacity: 0;
  transform: translate(-30px, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* fade-in-right */
.fade-in-right-enter,
.fade-in-right-appear {
  opacity: 0;
  transform: translate(30px, 0);
}
.fade-in-right-enter-active,
.fade-in-right-appear-done {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.fade-in-right-exit {
  opacity: 1;
  transform: translate(0, 0);
}
.fade-in-right-exit-active {
  opacity: 0;
  transform: translate(30px, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* fade-in-top */
.fade-in-top-enter,
.fade-in-top-appear {
  opacity: 0;
  transform: translate(0, -30px);
}
.fade-in-top-enter-active,
.fade-in-top-appear-done {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.fade-in-top-exit {
  opacity: 1;
  transform: translate(0, 0);
}
.fade-in-top-exit-active {
  opacity: 0;
  transform: translate(0, -30px);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* fade-in-bottom */
.fade-in-bottom-enter,
.fade-in-bottom-appear {
  opacity: 0;
  transform: translate(0, 30px);
}
.fade-in-bottom-enter-active,
.fade-in-bottom-appear-done {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.fade-in-bottom-exit {
  opacity: 1;
  transform: translate(0, 0);
}
.fade-in-bottom-exit-active {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* zoom-in-center */
.zoom-in-center-enter,
.zoom-in-center-appear {
  opacity: 0;
  transform: scaleX(0);
}
.zoom-in-center-enter-active,
.zoom-in-center-appear-done {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.zoom-in-center-exit {
  opacity: 1;
  transform: scaleX(1);
}
.zoom-in-center-exit-active {
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

/* zoom-in-top */
.zoom-in-top-enter,
.zoom-in-top-appear {
  opacity: 0;
  transform: scaleY(0);
}
.zoom-in-top-enter-active,
.zoom-in-top-appear-done {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.zoom-in-top-exit {
  opacity: 1;
  transform: scaleY(1);
}
.zoom-in-top-exit-active {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* zoom-in-bottom */
.zoom-in-bottom-enter,
.zoom-in-bottom-appear {
  opacity: 0;
  transform: scaleY(0);
}
.zoom-in-bottom-enter-active,
.zoom-in-bottom-appear-done {
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center bottom;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.zoom-in-bottom-exit {
  opacity: 1;
  transform: scaleY(1);
}
.zoom-in-bottom-exit-active {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* zoom-in-left */
.zoom-in-left-enter,
.zoom-in-left-appear {
  opacity: 0;
  transform: scale(0.45, 0.45);
}
.zoom-in-left-enter-active,
.zoom-in-left-appear-done {
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top left;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.zoom-in-left-exit {
  opacity: 1;
  transform: scale(1, 1);
}
.zoom-in-left-exit-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
  transform-origin: top left;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* zoom-in-right */
.zoom-in-right-enter,
.zoom-in-right-appear {
  opacity: 0;
  transform: scale(0.45, 0.45);
}
.zoom-in-right-enter-active,
.zoom-in-right-appear-done {
  opacity: 1;
  transform: scale(1, 1);
  transform-origin: top right;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.zoom-in-right-exit {
  opacity: 1;
  transform: scale(1, 1);
}
.zoom-in-right-exit-active {
  opacity: 0;
  transform: scale(0.45, 0.45);
  transform-origin: top right;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* collapse-transition */
.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
    0.3s padding-bottom ease-in-out;
}
/* horizontal-collapse-transition */
.horizontal-collapse-transition {
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
    0.3s padding-right ease-in-out;
}

/* flip-transition */
.front-face-transition-enter {
  transform: rotateY(180deg);
}
.front-face-transition-enter-active {
  transition: all 1000ms ease;
  transform: rotateY(0deg);
}
.front-face-transition-enter-done {
  transform: rotateY(0deg);
}
.front-face-transition-exit {
  transform: rotateY(0deg);
}
.front-face-transition-exit-active {
  transform: rotateY(180deg);
  transition: all 1000ms ease;
}
.front-face-transition-exit-done {
  transform: rotateY(180deg);
}

.back-face-transition-enter {
  transform: rotateY(-180deg);
}
.back-face-transition-enter-active {
  transform: rotateY(0deg);
  transition: all 1000ms ease;
}
.back-face-transition-enter-done {
  transform: rotateY(0deg);
}
.back-face-transition-exit {
  transform: rotateY(0deg);
}
.back-face-transition-exit-active {
  transform: rotateY(-180deg);
  transition: all 1000ms ease;
}
.back-face-transition-exit-done {
  transform: rotateY(-180deg);
}